<template>
  <!-- 最近访问 -->
  <div class="Recent">
    <nav-bar
      :title="topTitle"
      :fatherIsTouch="isTouch"
      @cancelClick="cancelClick"
      @checkClick="checkClick"
      :isSearch="false"
      :DirectoryIdArr="DirectoryIdArr"
      @handleGoBack="handleGoBack"
    ></nav-bar>

    <!-- 文件菜单 -->
    <grid-list></grid-list>

    <!-- 最近访问 -->
    <div class="recent">
      <div class="recent_title">最近访问</div>
      <div class="recent_content">
        <!-- 数据列表 -->
        <van-checkbox-group v-model="checkArr" ref="listCheck" @change="handleListCheckbox" max="1">
          <data-list
            v-for="(item, index) in listData"
            :key="item.eFileResultType==2 ? item.cloudDirectoryInfo.directoryId: item.cloudFileInfo.fileId"
            :fileCategory="item.eFileResultType == 2 ? 'default' : item.cloudFileInfo.fileCategory"
            :title="item.eFileResultType==2 ? item.cloudDirectoryInfo.name: item.cloudFileInfo.name"
            :label="item.eFileResultType==2 ? item.cloudDirectoryInfo.createTime: item.cloudFileInfo.createTime"
            :index="item.eFileResultType==2 ? item.cloudDirectoryInfo.directoryId: item.cloudFileInfo.fileId"
            :isCollection="item.eFileResultType==2 ? item.cloudDirectoryInfo.isFavourite: item.cloudFileInfo.isFavourite"
            :uploadStatus="item.eFileResultType==2 ? item.cloudDirectoryInfo.uploadStatus: item.cloudFileInfo.uploadStatus"
            :DetailsArr="listData[index]"
            :menuParameter="menuParameter"
            :isTouch="isTouch"
            v-longtap="() => handleTouch(item, index)"
            :currentItem="item"
            @handleCellClick="handleCellClick"
            @handleDetailsClick="handleDetailsClick"
          ></data-list>
        </van-checkbox-group>
      </div>
    </div>

    <operation-menu
      v-show="isTouch"
      isRecent
      :checkArr="checkArr"
      :menuParameter="menuParameter"
      :isFavourite="isFavourite"
      @KnowledgeTreeCancelCollection="KnowledgeTreeCancelCollection"
    ></operation-menu>

    <transition name="van-slide-right">
      <van-popup
        class="detail"
        v-model="DetailShow"
        v-if="DetailShow"
        style="width: 100vw; height: 100vh;"
        :overlay="false"
      >
        <detail :DetailObj="DetailObj" @handleGoBack="(bol) => DetailShow = bol"></detail>
      </van-popup>
    </transition>
  </div>
</template>

<script>
import NavBar from "components/public/NavBar.vue";
import GridList from "components/DocumentManage/GridList.vue";
import DataList from "components/public/DataList.vue";
import OperationMenu from "components/public/OperationMenu.vue";
import Detail from "components/public/Details.vue";

export default {
  components: {
    NavBar,
    GridList,
    DataList,
    OperationMenu,
    Detail,
  },
  name: "Recent",
  data() {
    return {
      // 通用变量
      // 顶部标题
      topTitle: "文件",
      // 是否长按标识
      isTouch: false,
      checkArr: [],
      // 最近访问数据列表
      listData: [],

      // 将文件id和文件类型传给详情组件
      DetailsArr: [],
      // 将id和treeId传给操作菜单组件，用于操作事件
      menuParameter: {},
      // 长按选中的index下标
      activeIndex: 0,
      // 所选是否已收藏
      isFavourite: false,
      // 点击的DirectoryId, 目录ID, 用于点击进入文件夹
      DirectoryId: "",
      DirectoryIdArr: [""],

      DetailShow: false,
      DetailObj: {},
    };
  },
  created() {
    this.getRecentDocuments();
  },
  methods: {
    handleDetailsClick(obj) {
      // console.log(obj)
      this.DetailObj = obj;
      this.DetailShow = true;
    },
    // 通用事件
    // 列表长按事件
    handleTouch(item, index) {
      console.log("长按了");
      // console.log(item)
      this.activeIndex = index;
      let id = item.eFileResultType == 2 ? item.cloudDirectoryInfo.directoryId : item.cloudFileInfo.fileId
      this.checkArr.push(id)
      this.isTouch = true;
    },
    // 监听多选按钮点击事件
    handleListCheckbox(arr) {
      // console.log(arr)
      // console.log(JSON.parse(this.$route.params.item).treeId)
      this.menuParameter.idArr = arr[0];
      this.menuParameter.resourcesId = this.DetailsArr[this.activeIndex].fileId; // 转为resourcesId
      this.menuParameter.type = this.DetailsArr[this.activeIndex].type;
      this.menuParameter.hdfsUrl = this.DetailsArr[this.activeIndex].hdfsUrl;
      this.isFavourite = this.DetailsArr[this.activeIndex].isFavourite;

    //   console.log(this.menuParameter);
    },
    // 子组件传的取消事件
    cancelClick(bol) {
      // console.log(bol)
      this.isTouch = bol;
    },
    //
    checkClick(bol) {
      this.$refs.listCheck.toggleAll(bol);
    },

    // 获取最近访问数据列表
    getRecentDocuments() {
      this.$request({
        method: "get",
        url: "/api/RecentDocument/GetRecentDocuments",
        params: {
          Token: sessionStorage.getItem("mobileToken"),
        },
      }).then(({ data }) => {
        // console.log(data)
        if (data.code == 200) {
          this.listData = data.data;
          // 时间转化
          this.listData.forEach((item) => {
            let splitCreateTimeArr = [];
            if (item.eFileResultType == 1) {
              splitCreateTimeArr = item.cloudDirectoryInfo.createTime.split(
                "T"
              );
              item.cloudDirectoryInfo.createTime =
                splitCreateTimeArr[0] + " " + splitCreateTimeArr[1];
            } else {
              splitCreateTimeArr = item.cloudFileInfo.createTime.split("T");
              item.cloudFileInfo.createTime =
                splitCreateTimeArr[0] + " " + splitCreateTimeArr[1];
            }
            // 文件或文件夹类型判断
            switch (item.eFileResultType) {
              case 0:
                item.eFileResultType = 1;
                break;
              case 1:
                item.eFileResultType = 2;
                break;
            }
          });

          this.DetailsArr = this.listData.map((item) => {
            // let type
            // switch(item.eFileResultType){
            // case 0:
            //     type = 1;break;
            // case 1:
            //     type = 2;break;
            // }
            let obj = {
              fileId:
                item.cloudFileInfo == null
                  ? item.cloudDirectoryInfo.directoryId
                  : item.cloudFileInfo.fileId,
              hdfsUrl: item.eFileResultType == 2 ? null : item.hdfsUrl,
              type: item.eFileResultType,
            };
            return obj;
          });
        } else {
          this.$notify("加载数据失败，请重试。");
        }
      });
    },
    // 子组件传过来的取消收藏事件
    KnowledgeTreeCancelCollection(bol) {
      if (bol) {
        this.listData[this.activeIndex].cloudFileInfo.isFavourite = false;
        this.isTouch = false;
      }
    },
    // 子组件cell点击事件, 用于进入文件夹
    handleCellClick(item) {
      // 重置当前页码
      this.PageIndex = 1;

      // console.log(item)
      if (item.eFileResultType != 2)
        return this.$notify({
          type: "warning",
          duration: 1000,
          message: "非文件夹不能进入！",
        });
      this.DirectoryId = item.cloudDirectoryInfo.directoryId;
      // 储存DirectoryId
      this.DirectoryIdArr.push(this.DirectoryId);
      this.getRecentDocuments(false);
    },
    // 子组件返回上一级事件，
    handleGoBack(arr) {
      // console.log(arr)
      this.DirectoryId = arr[arr.length - 1];
      this.getRecentDocuments(false);
    },
  },
  watch: {
    isTouch(newVal) {
      if (newVal) {
        this.topTitle = `已选中${this.checkArr.length}项`;
      } else {
        this.topTitle = "文件";
        // 非长按情况下情况多选款的值
        this.checkArr = [];
      }
      // console.log(newVal)
    },
    checkArr(newVal) {
      if (this.isTouch) {
        this.topTitle = `已选中${this.checkArr.length}项`;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.recent_title {
  font-size: 17px;
  color: #2a2b2d;
  font-weight: 500;
  padding: 15px 0;
}
</style>